<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Js实现鼠标滑入焦点图切换效果</title>
<style>
.30PT{font-size:30pt;font-family:微软雅黑;color:#0099CC}
* {margin:0;padding:0;}
ul, li {list-style:none;}
.mid {margin:0 auto;}
.area {width:240px;height:200px;overflow:hidden;background:#999;margin-top:150px;position:relative;}
#pics {position:relative;}
#pics li {position:absolute;visibility:hidden;}
#pics li.show {visibility:visible;}
#pics li img {vertical-align:middle;}
.operate {width:240px;height:20px;line-height:20px;background:#ccc;position:absolute;bottom:0px;}
#button {float:right;}
#button li {float:left;width:20px;height:20px;text-align:center;margin:0 3px;font-family:"Arial";font-size:12px;color:#fff;background:#000;}
#button li.current {background:#f00;cursor:pointer;}
</style>
</head>
<body>
<div class="area mid">
	<div>
		<ul id="pics">
			<li class="show" id="one"><img src="images/1.jpg" width="240" height="200"/></li>
			<li id="two"><img src="images/2.jpg" width="240" height="200"/></li>
			<li id="three"><img src="images/3.jpg" width="240" height="200"/></li>
			<li id="four"><img src="images/4.jpg" width="240"  height="200"/></li>
			<li id="five"><img src="images/5.jpg" width="240" height="200"/></li>
		</ul>
	</div>
	<div class="operate">
		<ul id="button">
		   <li class="current" id="but_one">1</li>
		   <li id="but_two">2</li>
		   <li id="but_three">3</li>
		   <li id="but_four">4</li>
		   <li id="but_five">5</li>
		</ul>
	</div>
</div>
<script type="text/javascript">
    var pics = document.getElementById("pics");
	var images = pics.getElementsByTagName("li");
	var button = document.getElementById("button").getElementsByTagName("li");
	function init(index){
		for(i=index;i<button.length;i++){
			//index为图片的序号值
			mouseOverSwitchPic(i);
		}
	}
	
	function mouseOverSwitchPic(i){
	    var picIndex=i;
		// 为picIndex赋值i. button按钮添加onmouseover可以触发函数
		button[i].onmouseover=function change(){
		for(j=0;j<this.parentNode.childNodes.length;j++){
			//以this(当前触发事件的元素)为起点,的父节点的所有子节点
			//的length值为最高值,开始遍历. ;
			this.parentNode.childNodes[j].className="";
			//以this(当前触发事件的元素)为起点
			//的父节点的所有子节点的className为空. 危险慎用.;
		}
		this.className="current";////this. 即当前触发onmouseover的元素的className为"current";
		for(m=0;m<images.length;m++){//以images.length为最高值进行遍历.遍历images;
			images[m].className="";//清空所有mages图片中所有元素的className;
			if (m==picIndex){
				images[m].className="show";//images图片的第picIndex个元素的className值为show; 
			}
		}
		}
	}
	init(0);	
</script>
</body>
</html>
